<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>星球旋转</title>
		<style type="text/css">
			#mycanvas{
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas"></canvas>
		<script type="text/javascript">
			var hb;
			var xqlist=[{
				name:"水星",
				r:15,
				gdr:110,
				color:"#666666",
				jiaodu:0,
				sudu:40
			},{
				name:"金星",
				r:18,
				gdr:150,
				color:"#00FFFF",
				jiaodu:0,
				sudu:14
			},{
				name:"地球",
				r:20,
				gdr:220,
				color:"blue",
				jiaodu:0,
				sudu:10,
				wx:{
					name:"月亮",
					r:10,
					gdr:35,
					color:"yellow",
					jiaodu:0,
					sudu:15
				}
			},{
				name:"土星",
					r:23,
					gdr:300,
					color:"#8A2BE2",
					jiaodu:0,
					sudu:10
			}
			];
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				mycanvas.width=800;
				mycanvas.height=700;
				hb=mycanvas.getContext("2d");
				hb.fillStyle="black";
				hb.fillRect(0,0,800,700);
				//画地球轨道
//				hb.beginPath();
//				hb.strokeStyle="white";
//				hb.arc(0,0,130,0,2*Math.PI);
//				hb.stroke();
				//画地球
//				hb.beginPath();
				//默认0度
//				var jiaodu=0;
//				var hudu=Math.PI/180*jiaodu;
//				var dqx=130*Math.cos(hudu);
//				var dqy=130*Math.sin(hudu);
//				grd=hb.createLinearGradient(100,0,160,0);
//				grd.addColorStop(0,"white");
//				grd.addColorStop(1,"blue");
//				hb.arc(dqx,dqy,30,0,2*Math.PI);
//				hb.fillStyle=grd;
//				hb.fill();
			};
			function draw(arr){
				//画星球轨道
				hb.beginPath();
				hb.strokeStyle="white";
				hb.arc(0,0,arr.gdr,0,2*Math.PI);
				hb.stroke();
				//画星球
				hb.beginPath();
				var hudu=Math.PI/180*arr.jiaodu;
				//星球圆心坐标
				var xqx=arr.gdr*Math.cos(hudu);
				var xqy=arr.gdr*Math.sin(hudu);
				hb.arc(xqx,xqy,arr.r,0,2*Math.PI);
				//星球渐变坐标
				var jbksx=(arr.gdr-arr.r)*Math.cos(hudu);
				var jbksy=(arr.gdr-arr.r)*Math.sin(hudu);
				var jbjsx=(arr.gdr+arr.r)*Math.cos(hudu);
				var jbjsy=(arr.gdr+arr.r)*Math.sin(hudu);
				grd=hb.createLinearGradient(jbksx,jbksy,jbjsx,jbjsy);
				grd.addColorStop(0,"white");
				grd.addColorStop(1,arr.color);
				hb.fillStyle=grd;
				hb.fill();
				if(arr.wx){
					//画星卫轨道
					hb.save();
					hb.translate(xqx,xqy);
					hb.beginPath();
					hb.strokeStyle="white";
					hb.arc(0,0,arr.wx.gdr,0,2*Math.PI);
					hb.stroke();
					//画卫星
					hb.beginPath();
					var hudu=Math.PI/180*arr.wx.jiaodu;
					//卫星圆心坐标
					var xqx=arr.wx.gdr*Math.cos(hudu);
					var xqy=arr.wx.gdr*Math.sin(hudu);
					hb.arc(xqx,xqy,arr.wx.r,0,2*Math.PI);
					//卫星渐变坐标
					var jbksx=(arr.wx.gdr-arr.wx.r)*Math.cos(hudu);
					var jbksy=(arr.wx.gdr-arr.wx.r)*Math.sin(hudu);
					var jbjsx=(arr.wx.gdr+arr.wx.r)*Math.cos(hudu);
					var jbjsy=(arr.wx.gdr+arr.wx.r)*Math.sin(hudu);
					grd=hb.createLinearGradient(jbksx,jbksy,jbjsx,jbjsy);
					grd.addColorStop(0,"white");
					grd.addColorStop(1,arr.wx.color);
					hb.fillStyle=grd;
					hb.fill();
					arr.wx.jiaodu+=arr.wx.sudu;
					hb.restore();
				}
				arr.jiaodu+=arr.sudu;
			}
			setInterval(function(){
				hb.clearRect(0,0,800,700);
				hb.fillStyle="black";
				hb.fillRect(0,0,800,700);
				//画太阳
				hb.save();
				hb.beginPath();
				hb.translate(400,350);
				hb.arc(0,0,80,0,2*Math.PI);
				var grd=hb.createRadialGradient(0,0,30,0,0,80);
				grd.addColorStop(0,"red");
				grd.addColorStop(1,"yellow");
				hb.fillStyle=grd;
				hb.fill();
				//画星球
				draw(xqlist[0]);
				draw(xqlist[1]);
				draw(xqlist[2]);
				draw(xqlist[3]);
				hb.restore();
			},500);
		</script>
	</body>
</html>
